<template>
    <div class="vue-ms-main  vue-ms-main-add" >
        <div class="ms-top">
            <!-- 当前页标题  -->
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i> 密码修改</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!--  添加 -->
        <div class = "ms-updmain">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="info infos">
                    <div class="fl upd-model" prop="userName">
                        <el-form-item label="用户账号" prop="usrname" ><i class="xing">*</i>
                            <el-input type="text" v-model="ruleForm.usrname"  placeholder="请填写用户账号" auto-complete="on"></el-input>
                        </el-form-item>
                        <el-form-item label="旧 密 码 " prop="oldPwd" ><i class="xing">*</i>
                            <el-input type="password" v-model="ruleForm.oldPwd"  placeholder="请填写旧密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新 密 码 " prop="newPwd" ><i class="xing">*</i>
                            <el-input type="password" v-model="ruleForm.newPwd"  placeholder="请填写新密码 " auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="qnewPwd" ><i class="xing">*</i>
                            <el-input type="password" v-model="ruleForm.qnewPwd"  placeholder="请填写确认密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" :loading="addLoading">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </div>
                </div>

            </el-form>
        </div>

    </div>
</template>

<script>
    import insurance from '../../api/insurance';
    export default {
        data() {
            var checkProName = (rule, value, callback) => {if (!value) { return callback(new Error('请输入用户账号'));}else{callback(); }};
            var checkOldPwd = (rule, value, callback) => {if (!value) { return callback(new Error('请输入旧密码'));}else{callback(); }};
            var checkNewPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.qnewPwd !== '') {
                        if (value !== this.ruleForm.newPwd) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }else{
                        callback();
                    }
                }
            };
            var checkQnewPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.newPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                addLoading:false,
                ruleForm: {
                    usrname: '',
                    oldPwd:'',
                    newPwd:'',
                    qnewPwd:''
                },
                // 验证
                rules: {
                    usrname: [ { validator: checkProName, trigger: 'blur' }],
                    oldPwd: [ { validator: checkOldPwd, trigger: 'blur' }],
                    newPwd: [ { validator: checkNewPwd, trigger: 'blur' }],
                    qnewPwd: [ { validator: checkQnewPwd, trigger: 'blur' }],
                },
            };
        },
        methods: {
            submitForm(formName) {
                var that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.addLoading = true;
                        $.ajax(insurance.posturl+"user/changepwd?usrname="+that.ruleForm.usrname+'&oldPwd='+that.ruleForm.oldPwd+'&newPwd='+that.ruleForm.newPwd,{
                            headers: {'Content-Type': 'application/json;charset=UTF-8'},
                            'type': 'POST',
                            success:function (res) {
                                that.addLoading = false;
                                res = JSON.parse(res);
                                if(res.isSuccess){
                                    that.altopen('修改成功！','success');
                                    var seconds = 1;
                                    var time = setInterval(() => {
                                        if (seconds > 1) {
                                            seconds = seconds - 1;
                                        } else {
                                            that.$router.push('/login');
                                            clearInterval(time);
                                        }
                                    },1000);
                                }
                            }
                        });

                    } else {
                        this.altopen('请把信息填写完整！','warning');
                        return false;
                    }
                });
            },

            resetForm(formName) {
                // this.$refs[formName].resetFields();
                this.initDay();
            },
            // 公共弹框
            altopen(msg,type) {
                this.$notify({
                    type:type,
                    message: msg,
                    offset: 100,
                });
            },

        },
        mounted(){
        }
    }
</script>
<style>
    .el-form-item__content{position: relative};

    .xing{color: red; font-size: 20px; position: absolute;left: -75px; top: 7px;}
    .img-upd-div{height: 134px; width: 225px; float:left; overflow: hidden;border: #ccc 1px solid;margin-bottom: 5px; margin-right: 5px; position: relative}
    .img-upd-div .el-form-item__error{ position: absolute; bottom: 0px;  text-align: center; left: 0px; width: 100%;}
    .image-list2 .img-uplod{
        position: absolute;
        z-index: 999;
        background: transparent;
        top: -24px;
        width: 100%;
        height: 160px !important;
        color: #fff;
    }
    .el-form-item.is-required .el-form-item__label:before{display: none;}

</style>
